<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>订单页面</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<script src="../../js/mui.min.js" type="text/javascript"></script>
		<script src="../../js/vue.min.js" type="text/javascript"></script>
		<script src="../../js/jquery.min.js" type="text/javascript"></script>
		<script src="../../js/us/login.js"></script>
		<style type="text/css">
			.date{position: absolute;left: 44%;bottom: 4px;color: orangered;font-weight: bold;}
			.price{position: absolute;left: 44%;bottom: 40px;color: orangered;font-weight: bold;}
			i.jiange{font-style: normal;visibility: hidden;}
			.person dl{margin: 0px;padding: 10px;}
			.person dl dt{padding: 10px;padding-left: 0px;padding-right: 0px;border-bottom: dashed 1px #ccc;position: relative;}
			.person dl dt a{color: #35d0c9;border-radius: 3px;display: inline-block;padding: 4px;border: solid 1px #35D0C9;
			position: absolute;right: 0px;bottom: 10px;}
			.person dl dd{padding: 10px;padding-left: 0px;padding-right: 0px;margin-left: 0px;}
			.mui-input-group:before{background-color: transparent;}
			.mui-input-group .mui-input-row:after{background-color: transparent;}
			.mui-input-row label{padding-left:0px;width: auto !important;}
			input.shuru{width: 76% !important;}
			.mui-bar-tab .footLink.mui-tab-item.mui-active {background-color: #35d0c9;color: #fff;}
			/*优惠卷信息*/
            .coupon {padding: 12px;background-color: #fff;margin-top: 10px;padding-top: 0px;padding-bottom: 0px;}
            .coupon .discount {padding-top: 12px;padding-bottom: 12px;border-bottom: dashed 1px #ccc;position: relative;height: 50px;}
			.coupon .discount span{position: absolute;top: 15px;}
			.coupon .discount .choice {position: absolute;right: 12px;top: 9px;}
			.coupon .discount .mui-switch-blue.mui-active {border: 2px solid #35d0c9;background-color: #35d0c9;}
			a.disLink{display: inline-block;width: 100%;position: relative;height: 44px;}
			a.disLink span.leftDis{position: absolute;top: 14px;color: #323232;}
			a.disLink span.rightDis{position: absolute;right: 30px;top: 14px;color: #323232;}
			.mui-icon-arrowright:before {content: '\e583';color: #35d0c9;}
			/*test*/
			#alipay{background-color: #35d0c9 !important;color: #fff !important;border: none !important;padding: 10px;text-align: center;margin-bottom: 4px;}
			#wxpay{background-color: #35d0c9 !important;color: #fff !important;border: none !important;padding: 10px;text-align: center;}
			#total{background-color: transparent !important;border: none !important;border-bottom: solid 1px #35d0c9 !important;text-align: center !important;margin-bottom: 0px !important;}
			div#dcontent{background-color: #fff;position: fixed;bottom: 0px;z-index: 9999;width: 100%;display: none;} 
		</style>
		<link href="../../css/common.css"  type="text/css"/>
		<script src="../../js/immersed.js" type="text/javascript"></script>
		<script src="../../js/us/URL.js" type="text/javascript"></script>
		<script src="../../js/us/logger.js" type="text/javascript"></script>
	</head>
	<body>
		<!--header  s-->
		<header class="mui-bar mui-bar-nav">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">订单详情</h1>
		</header>
		<!--header e-->
		<!--主内容区     s-->
		<div class="mui-content mui-scroll" style="margin-bottom: 50px;">
			<ul class="mui-table-view">
			    <li class="mui-table-view-cell mui-media" style="position: relative;">
			        <a href="javascript:;">
			            <img class="mui-media-object mui-pull-left" :src="litpic"  style="width: 40%;max-width: initial;height: auto;">
			            <div class="mui-media-body mui-ellipsis">
			                {{title}}
			                <p class="mui-ellipsis date" id="yourDate">321</p>
			            </div>
			             <span class=" price_z">{{storeprice}}元/人</span>
			        </a>
			    </li>
			</ul>
		    <!--联系人信息   s-->
		    <div class="person" style="background-color: #fff;">
		    	<dl>
		    		<dt>联系人<a href="javascript:void(0);" class="mui-pull-right">选择联系人</a></dt>
		    		<form class="mui-input-group">
    					<div class="mui-input-row">
        					<label>联系人</label>
       					   <input type="text" class="mui-input-clear shuru" placeholder="请输入用户名" id="linkman">
    					</div>
    					<div class="mui-input-row">
        					<label>手机号</label>
       					   <input type="text" class="mui-input-clear shuru" placeholder="请输入用户手机号码" id="linktel">
    					</div>
					</form>
		    	</dl>
		    </div>
		    <!--联系人信息   e-->
		    <!--出行人信息   s-->
		    <div class="person" style="background-color: #fff;margin-top: 10px;">
		    	<dl>
		    		<dt>出行人<a href="javascript:void(0);" class="mui-pull-right">选择出行人</a></dt>
		    		<form class="mui-input-group">
    					<div class="mui-input-row">
        					<label>游客姓名</label>
       					   <input type="text" class="mui-input-clear shuru" placeholder="请填写出行人信息" id="tourername">
    					</div>
    					<div class="mui-input-row">
        					<label>身份证号</label>
       					   <input type="text" class="mui-input-clear shuru" placeholder="请填写出行人信息" id="Idcard">
    					</div>
    					<div class="mui-input-row">
        					<label>联系电话</label>
       					   <input type="text" class="mui-input-clear shuru" placeholder="请填写出行人信息" id="mobiel">
    					</div>
    					<div class="mui-input-row" style="height: auto !important;">
        					<label>订单备注</label>
       					   	<textarea style="resize: none;padding: 0px;height: 42px;line-height: 42px;width: 76%;" placeholder="请输入备注信息" id="remark"></textarea>
    					</div>
					</form>
		    	</dl>
		    </div>
		    <!--优惠卷信息    s-->
		    <!--<div class="coupon">
		      <div class="discount">	
		    	<span>使用优惠券</span>
		    	<div class="mui-switch mui-switch-mini  mui-switch-blue choice" id="myswitch">
		    	  <div class="mui-switch-handle"></div>
		    	</div>
		      </div>
		    	<a href="javascript:void(0)" style="width: 100%; display: none;" class="disLink" id="disLink">
		    		<span class="leftDis">待金劵</span>
		    		<span class="rightDis">减￥<i id="disNum">17</i></span>
		    		<span class="mui-icon  mui-icon-arrowright mui-pull-right" style="position: absolute;right: 0px;top: 12px;"></span>
		    	</a>
		    </div>-->
		    <!--优惠券信息     e-->
		</div>
		<!--主内容区     e-->
		<!--出行人信息    e-->
		<!--费用明细        s-->
		<div id="forward" class="mui-popover mui-popover-action mui-popover-bottom">
			<div class="mui-card">
				<div class="mui-card-content">
					<dl style="margin-top: 0px;">
						<dt style="padding: 10px;text-align: center;border-bottom: dashed 1px #ccc;">费用明细</dt>
						   	<dd>1.住宿</dd>
							<dd>2.门票</dd>
							<dd>3.三餐</dd>
					</dl>
				</div>
			</div>
		</div>
		<!--footer start-->
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active footLink" data-id="home" href="#forward">
				<span class="mui-tab-label price_z" id="totalPrice">总价</span>
				
			</a>
			<a class="mui-tab-item footLink" data-id="tripline"  id="order" href="#dcontent"> 
				<span class="mui-tab-label">提交订单</span>
			</a>
		</div>
		<!--footer end-->
		<script type="text/javascript">
			mui.init();
			mui.plusReady(function(){
				var text2=plus.storage.getItem("yourDate");
				document.getElementById("yourDate").innerHTML=text2;
			});
			function getDefaultData() {
				return {
					litpic: '',
					title: '',
					author: '',
					time: '',
					content: '',
					storeprice:'',
					id:'',
				}
			}
			//新建vue
			var vm = new Vue({
				el: '.mui-content',
				data: getDefaultData(),
				methods: {
					resetData: function() {//重置数据
						//Object.assign(this.$data, getDefaultData());
					}
				}
			});
			//监听自定义事件，获取新闻详情
				document.addEventListener('get_order', function(event) {
					document.getElementById("yourDate").innerText=plus.storage.getItem("Time");
					//前页传入的数据，直接渲染，无需等待ajax请求详情后
					vm.litpic = event.detail.litpic;
					vm.title = event.detail.title;
					vm.storeprice=event.detail.storeprice;
					vm.id=event.detail.id;
					//test s
					user=plus.storage.getItem("nickname");
					document.getElementById("order").addEventListener("tap",function(){
					person=document.getElementById("linkman").value;
					 mobileMsg=$("#linktel").val();
					 idCard=$("#Idcard").val();
					 linkPhone=$("#mobiel").val();
					 beizhu=$("#remark").val();
					 tourer=$("#tourername").val();
						mui.ajax(pageUrl.ddxq, {
							data:{
							'lineid':vm.id,
							'username':user,
							'linkman':person,
							'linktel':mobileMsg,
							'mobile':linkPhone,
							'tourername':tourer,
							'remark':beizhu,
							'cardnumber':idCard
							},
							dataType: 'json', //服务器返回json格式数据
							type: 'POST', //HTTP请求类型
							crossDomain:true,
							success: function(data) {
					   		 		var zhifuPage=mui.preload({
							      	'id':'zhifu',
							      	"url":"zhifu.html"
					   		 		});
					   		 		
					   		 		mui.fire(zhifuPage,"zhifuMsg",{
					   		 			orders:data.orderid,
					   		 			title:data.title,
					   		 			addtime:data.addtime,
                    					price:data.price,
                    					
                    				});
                    				setTimeout(function() {
										mui.openWindow({
											id: 'zhifu',
											show: {
												aniShow: 'pop-in'
											},
											waiting: {
												autoShow: false
											}
										});
									}, 0);
					   		 		
					   		 		
                         			
							},
							error: function(xhr, type, errorThrown) {
								//异常处理；
								alert(type);
								alert(errorThrown);
								alert(xhr.statusText);
							}
					});
					
					
					
					});
				//test e

				//有无优惠券的变化 总价格的变化
				var change=$("#disLink").css("display")=="block";
				var c = "_"+change+"_";
					if(c == "_true_"){
				      	document.getElementById("totalPrice").innerText=vm.storeprice-document.getElementById("disNum").innerText+"元/人";
				        document.getElementById("total").value=vm.storeprice-document.getElementById("disNum").innerText;document.getElementById("total").value=vm.storeprice; 
					}
					else{
					   document.getElementById("totalPrice").innerText=vm.storeprice+"元/人";
					   document.getElementById("total").value=vm.storeprice;
					}
					document.getElementById("myswitch").addEventListener("toggle",function(event){
					 if(event.detail.isActive){
						$("#disLink").css("display","block");
							document.getElementById("totalPrice").innerText=vm.storeprice-document.getElementById("disNum").innerText+"元/人";
							document.getElementById("total").value=vm.storeprice-document.getElementById("disNum").innerText;
					}
					else{
						$("#disLink").css("display","none");
						document.getElementById("totalPrice").innerText=vm.storeprice+"元/人";
						document.getElementById("total").value=vm.storeprice;
					}
				});
				
			});
			//重写返回逻辑
			mui.back = function() {
				plus.webview.currentWebview().hide("auto", 300);
				//动画结束后，恢复默认值
				setTimeout(function() {
					window.scrollTo(0, 0);
					vm.resetData();
				}, 300);
			}
		</script>
        <script type="text/javascript">
        	
				mui.plusReady(function(){
					document.getElementById("order").addEventListener("tap",function(){
					var isLogin=plus.storage.getItem("isLogin");
					var islog = "_"+isLogin+"_";
					var dc=document.getElementById("dcontent");
					if(islog=="_true_"){
						mui.toast("您已成功登录，可直接进行支付");
					}
					else{
						mui.alert("您尚未进行注册登录，请先进行注册登录","确认",function(){
						$("#dcontent").css("display","none !important");
						$("#dcontent").hide();
						$(".mui-backdrop").hide();
						$("#dcontent").removeClass("mui-active");
							mui.openWindow({
							url:'../../login/login.html'
							});
						});
						
						
						
					}
				   });
        	   })
        </script>		
		
	</body>
</body>
</html>